/**
 * webpack配置
 * 作者：余善谋 2020-12-22
 */


const path = require('path') // path模块
const HtmlWebpackPlugin = require("html-webpack-plugin") // 引入打包html的插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin") // 提取css
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin') // 压缩css
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin') // 删除dist
// 打包暴露出去
module.exports = {
  target: "web",
  // 1. 入口
  entry: {
    captcha: "./src/lib/captcha/captcha-mini.js", //验证码
    weui: "./src/lib/weui/weui.js", //微信ui插件
    commonCss: "./src/js/common/commonCss.js", // 公共的css
    swiper: "./src/lib/swiper/swiper-bundle.js", //轮播图
    // 公用的js
    dom: "./src/js/common/dom.js", //dom.js
    http: "./src/js/common/http.js", // http.js
    utils: "./src/js/common/utils.js", //utils.js
    //页面的js
    banner: "./src/js/banner.js", //广告
    home: "./src/js/home.js", //首页
    login: "./src/js/login.js", //登录
    register: "./src/js/register.js", //注册
    mine: "./src/js/mine.js", //我的
    // sports: "./src/js/sports.js", //运动
    edit: "./src/js/edit.js", //修改
    course: "./src/js/course.js", //课程
    courseDetail: "./src/js/courseDetail.js", // 课程详情
    player: "./src/js/player", //视频播放
    run: "./src/js/run.js", //跑步
    ride: "./src/js/ride.js", //骑行
    motiondata: "./src/js/motiondata.js", //运动数据
    badge: "./src/js/badge.js" //我的徽章
  },

  // 2. 出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "js/[name]-[hash:10].js",
    publicPath: './',
  },

  // 3. module
  module: {
    //规则
    rules: [
      // css
      {
        test: /\.css$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          "css-loader",
          "postcss-loader"
        ],
      },
      // less
      {
        test: /\.less$/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../'
            }
          },
          "css-loader",
          "postcss-loader", "less-loader"
        ]
      },
      //css背景图片打包
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url-loader',
        options: {
          name: '[hash].[ext]',
          limit: 10 * 1024,
          esModule: false,
          outputPath: 'img', // 打包后输出目录
        }
      },
      //HTML引入图片打包
      {
        test: /\.html$/,
        use: ['html-loader'],
      },
      //字体图标
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          outputPath: 'fonts' // 输出到这个文件夹中
        }
      },
      // js
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      }
    ]
  },

  // 4. 插件
  plugins: [
    // 广告页
    new HtmlWebpackPlugin({
      template: "./src/page/banner.html", // 你要以哪个html为模板 进行打包
      filename: 'banner.html',
      chunks: ['banner', 'commonCss', 'http', 'dom'], // 自己需要哪些模块
    }),
    // 首页
    // 使用插件 这个插件是把 html 打包到 dist 里面
    new HtmlWebpackPlugin({
      template: "./src/page/home.html", // 你要以哪个html为模板 进行打包
      filename: 'home.html',
      chunks: ['home', 'commonCss', 'http', 'dom', 'utils', "swiper"], // 自己需要哪些模块
    }),
    //登录
    new HtmlWebpackPlugin({
      template: "./src/page/login.html", // 你要以哪个html为模板 进行打包
      filename: 'login.html',
      chunks: ['login', 'commonCss', 'http', 'dom', 'utils'], // 自己需要哪些模块
    }),
    // 注册
    new HtmlWebpackPlugin({
      template: "./src/page/register.html", // 你要以哪个html为模板 进行打包
      filename: 'register.html',
      chunks: ['register', 'commonCss', 'http', 'dom', 'utils', "captcha"], // 自己需要哪些模块
    }),
    // 我的
    new HtmlWebpackPlugin({
      template: "./src/page/mine.html", // 你要以哪个html为模板 进行打包
      filename: 'mine.html',
      chunks: ['mine', 'commonCss', 'http', 'dom', 'utils'], // 自己需要哪些模块
    }),
    // 运动数据
    new HtmlWebpackPlugin({
      template: "./src/page/motiondata.html", // 你要以哪个html为模板 进行打包
      filename: 'motiondata.html',
      chunks: ['motiondata', 'commonCss', 'http', 'dom', 'utils'], // 自己需要哪些模块
    }),
    // 修改
    new HtmlWebpackPlugin({
      template: "./src/page/edit.html", // 你要以哪个html为模板 进行打包
      filename: 'edit.html',
      chunks: ['edit', 'commonCss', 'http', 'dom', 'utils', 'weui'], // 自己需要哪些模块
    }),
    // 课程列表
    new HtmlWebpackPlugin({
      template: "./src/page/course.html", // 你要以哪个html为模板 进行打包
      filename: 'course.html',
      chunks: ['course', 'commonCss', 'http', 'dom', 'utils'], // 自己需要哪些模块
    }),
    // 课程详情
    new HtmlWebpackPlugin({
      template: "./src/page/courseDetail.html", // 你要以哪个html为模板 进行打包
      filename: 'courseDetail.html',
      chunks: ['courseDetail', 'commonCss', 'http', 'dom', 'utils'], // 自己需要哪些模块
    }),
    // 视频播放
    new HtmlWebpackPlugin({
      template: "./src/page/player.html", // 你要以哪个html为模板 进行打包
      filename: 'player.html',
      chunks: ['player', 'commonCss', 'http', 'dom', 'utils'], // 自己需要哪些模块
    }),
    // 跑步
    new HtmlWebpackPlugin({
      template: "./src/page/run.html", // 你要以哪个html为模板 进行打包
      filename: 'run.html',
      chunks: ['run', 'commonCss', 'http', 'dom', 'utils'], // 自己需要哪些模块
    }),
    // 骑行
    new HtmlWebpackPlugin({
      template: "./src/page/ride.html", // 你要以哪个html为模板 进行打包
      filename: 'ride.html',
      chunks: ['ride', 'commonCss', 'http', 'dom', 'utils'], // 自己需要哪些模块
    }),
    // 我的徽章
    new HtmlWebpackPlugin({
      template: "./src/page/badge.html", // 你要以哪个html为模板 进行打包
      filename: 'badge.html',
      chunks: ['badge', 'commonCss', 'http', 'dom', 'utils'], // 自己需要哪些模块
    }),
    // 提取css
    new MiniCssExtractPlugin({
      filename: "css/[name]-[hash].css",
    }),

    // 压缩css
    new OptimizeCssAssetsWebpackPlugin(),

    // 删除dist
    new CleanWebpackPlugin()
  ],

  // 5. 模式
  mode: "development",

  // 6. 启动开发服务器
  // 开发服务器
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // 启动服务器目录
    compress: true, // 启动gzip压缩
    port: 8088, // 端口
    open: true, // 自动打开服务
    openPage: 'banner.html', // 指定打开服务器访问的页面
  }

}